<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>Demo</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <style type="text/css">
      .infotext { }

      #div_g .dygraph-label { font-family: Georgia, Verdana, serif; }

      #div_g .dygraph-title { font-size: 36px; text-shadow: gray 2px 2px 2px; }

      #div_g .dygraph-ylabel { font-size: 18px; text-shadow: gray -2px 2px 2px; }

      .chart { border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-top-color: black; border-right-color: black; border-bottom-color: black; border-left-color: black; border-image: initial; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 50px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px; }
    </style>
    <script type="text/javascript" src="./js/dygraph-combined.js"></script>
  </head>
  <body>
    <div id="div_g" style="width:1300px; height:600px;margin:auto; "></div>

    <script type="text/javascript">

      function getSimulateDataSet(date){
        var foo = []; 
        foo.push(date); 
        /*
          N Sensor value
          using `for` loop here may lead to some issue.(javascript is async!!!)
        */
        foo.push(Math.random()); 
        foo.push(Math.random()); 
        foo.push(Math.random()); 
        foo.push(Math.random()); 
        foo.push(Math.random()); 
        return foo; 
      }
      var period = 10000; //10s
      var data = [];
      var t = new Date();
      for (var i = 20; i >= 0; i--) {
        var x = new Date(t.getTime() - i * period);
        data.push(getSimulateDataSet(x));
      }

      var g = new Dygraph(document.getElementById("div_g"), data,
      {
        drawPoints: true,
        showRoller: true,
        valueRange: [0.0, 1.0],
        labels: ['Time', 'Sensor1', 'Sensor2'
        /*N Sensor Label*/
          , 'Sensor3'
          , 'Sensor4'
          , 'Sensor5'
          , 'Sensor6'
          , 'Sensor7'
          , 'Sensor8'
        ], 
        /*N Sensor Colors*/
        /*colors :['red', 'blue', '#22DDDD', '#ccccc'], */
        legend: 'always', 
        title: 'Foobar in Sensor1...(automatically updating on per ' + period/1000 +'s.)',
        titleHeight: 32,
        ylabel: 'Sensor BlaBla',
        xlabel: 'DateTime',

        highlightCircleSize: 2,
        strokeWidth: 1,
        strokeBorderWidth: false ? null : 1,

        highlightSeriesOpts: {
          strokeWidth: 3,
          strokeBorderWidth: 1,
          highlightCircleSize: 5,
        }, 
        showRangeSelector: true, /*/toggle to use selector or xxx*/

        labelsDivStyles: {
          'text-align': 'right',
          'background': 'none'
        }
      });
      setInterval(function() {
        var x = new Date();  // current time
        data.push(getSimulateDataSet(x));
        g.updateOptions( { 'file': data } );
      }, period);

    </script>
  </body>
</html>
